<template>
  <div class="chat">
    <TUICallKit></TUICallKit>
    <div :class="['TUI-chat', !isPC && 'TUI-chat-h5']">
      <div
        v-if="!currentConversationID"
        :class="['TUI-chat-default', !isPC && 'TUI-chat-h5-default']"
      >
        <slot></slot>
      </div>
      <div v-if="currentConversationID" :class="['TUI-chat', !isPC && 'TUI-chat-h5']">
        <!-- 头部 -->
        <ChatHeader
          :class="[
            'TUI-chat-header',
            !isPC && 'TUI-chat-H5-header',
            isUniFrameWork && 'TUI-chat-uniapp-header',
          ]"
          @closeChat="closeChat"
        ></ChatHeader>
        <!-- 消息列表 -->
        <MessageList
          :class="['TUI-chat-message-list', !isPC && 'TUI-chat-h5-message-list']"
          :isGroup="isGroup"
          :groupID="groupID"
          @handleEditor="handleEditor"
        ></MessageList>
        <!-- 倒计时 -->
        <ChatCountdownTimer title="问诊中" />
        <!-- 输入框工具条 -->
        <MessageInputToolbar
          v-if="isToolbarShow"
          :class="['TUI-chat-message-input-toolbar', !isPC && 'TUI-chat-h5-message-input-toolbar']"
          @insertEmoji="insertEmoji"
        ></MessageInputToolbar>
        <!-- 输入框 -->
        <MessageInput
          :class="[
            'TUI-chat-message-input',
            !isPC && 'TUI-chat-h5-message-input',
            isUniFrameWork && 'TUI-chat-uni-message-input',
            isWeChat && 'TUI-chat-wx-message-input',
          ]"
          :isMuted="false"
          :muteText="TUITranslateService.t('TUIChat.您已被管理员禁言')"
          :placeholder="TUITranslateService.t('请输入消息')"
          ref="messageInputRef"
          @handleToolbarListShow="handleToolbarListShow"
        ></MessageInput>
      </div>
      <!-- 群组管理 -->
      <div class="group-profile" v-if="isUniFrameWork && isGroup" @click="handleGroup">更多</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import TUIChatEngine, {
  TUIGlobal,
  TUITranslateService,
  TUIConversationService,
  TUIGroupService,
  TUIStore,
  StoreName,
  IMessageModel,
  IConversationModel,
} from '@tencentcloud/chat-uikit-engine'
import { TUICallKit } from '@tencentcloud/call-uikit-vue2.6'
import { ref, onUnmounted } from '../../adapter-vue'
import ChatHeader from './chat-header/index.vue'
import MessageList from './message-list/index.vue'
import MessageInput from './message-input/index.vue'
import MessageInputToolbar from './message-input-toolbar/index.vue'
import { isUniFrameWork } from '../../utils/is-uni'

// Dc 2023-03-09
import ChatCountdownTimer from '../TUIWidget/chat-countdown-timer/index.vue'

const emits = defineEmits(['closeChat'])
const isPC = ref(TUIGlobal.getPlatform() === 'pc')
const isWeChat = ref(TUIGlobal.getPlatform() === 'wechat')
const isToolbarShow = ref<boolean>(!isUniFrameWork)
const messageInputRef = ref()
const currentConversationID = ref()
// 是否显示群组管理
const isGroup = ref(false)
const groupID = ref('')

TUIStore.watch(StoreName.CONV, {
  currentConversationID: (id: string) => {
    currentConversationID.value = id
  },
  currentConversation: (conversation: typeof IConversationModel) => {
    isGroup.value = conversation?.type === TUIChatEngine.TYPES.CONV_GROUP
    groupID.value = conversation?.groupProfile?.groupID
  },
})

onUnmounted(() => {
  reset()
})

// 清空当前 conversationID
const reset = () => {
  TUIConversationService.switchConversation()
}

const closeChat = (conversationID: string) => {
  emits('closeChat', conversationID)
  reset()
}

const insertEmoji = (emojiObj: object) => {
  messageInputRef?.value?.insertEmoji(emojiObj)
}

const handleToolbarListShow = (show: boolean) => {
  if (isUniFrameWork) {
    isToolbarShow.value = show
  } else {
    isToolbarShow.value = true
  }
}
const handleEditor = (message: typeof IMessageModel, type: string) => {
  if (!message || !type) return
  switch (type) {
    case 'reference':
      // todo
      break
    case 'reply':
      // todo
      break
    case 'reedit':
      if (message?.payload?.text) {
        messageInputRef?.value?.reEdit(message?.payload?.text)
      }
      break
    default:
      break
  }
}

const handleGroup = () => {
  TUIGroupService.switchGroup(groupID.value)
  TUIGlobal?.global?.navigateTo({
    url: '/TUIKit/components/TUIGroup/manage-group/index',
  })
}
</script>
<style scoped lang="scss" src="./style/index.scss"></style>
